import axios from "axios"; //导入axios库，用于发送HTTP请求。
import { useState, useEffect } from "react"; //导入React的useState和useEffect钩子函数。
import { Pagination } from "antd"; //导入Ant Design的Pagination组件。
import { get_iao } from "../request/instance";
export default function Index1() {
    let [data, setData] = useState([]);
    let [xk, usexk] = useState('')
    let [xd, usexd] = useState('')
    let [nj, usenj] = useState('')
    let [bj, usebj] = useState('')


    /**
     * 异步获取iao数据
     *
     * @returns 无返回值
     */
    /**
     * 异步获取iao数据
     * 使用axios发送GET请求到指定的URL，获取iao数据并输出到控制台，同时设置数据
     */
    // let get_iao = async () => {
    //     console.log(xk,xd,nj,bj)
    //     await axios.get(`http://127.0.0.1:3010/as?xk=${xk}&xd=${xd}&nj=${nj}&bj=${bj}`).then((res) => {
    //         console.log(res.data.data);
    //         setData(res.data.data);
    //     });
    // };
    let goserch = () => {
        get_iao()
    }
    useEffect(() => {
        get_iao({xk,xd,nj,bj}).then(res => {
            setData(res.data.data)
        })
    }, []);
    // 表格数据渲染
    return (
        <>
            <div style={{ width: "800px" }}>
                {/* 时间范围:
                <input placeholder="开始时间" type="datetime-local" />
                <input placeholder="结束时间" type="datetime-local" /> */}
                学科
                <select  value={xk} name="" id="" onChange={(e)=>usexk(e.target.value)}>
                {data.map((i, index) => <option value={i.discipline}>{i.discipline}</option>)}
                    
                </select>
                学段
                <select  value={xd} name="data" id="" onChange={(e)=>usexd(e.target.value)}>
                    {data.map((i, index) => <option value={i.semester}>{i.semester}</option>)}
                </select>
                年级
                <select  value={nj} name="data" id="" onChange={(e)=>usenj(e.target.value)}>
                    {data.map((i, index) => <option value={i.grade}>{i.grade}</option>)}

                </select>
                班级
                <select  value={bj} onChange={(e)=>usebj(e.target.value)}>
                    {data.map((i, index) => <option value={i.age}>{i.age}</option>)}
                </select>
                <p></p>
                <button onClick={() => { goserch()}}>查询</button>
            </div>
            <table
                style={{ border: "1px solid black", width: "800px" }}
                border="1"
                cellSpacing="0">

                <tr>
                    <td>序号</td>
                    <td style={{ textAlign: "center" }}>作业名称</td>
                    <td>学科</td>
                    <td>学段</td>
                    <td>年级</td>
                    <td>班级</td>
                    <td>作业时间</td>
                    <td>布置老师</td>
                    <td>操作</td>
                </tr>
                {data.map((i, index) => {
                    return (
                        <tr key={index}>
                            <th>{index + 1}</th>
                            <th>{i.name}</th>
                            <th>{i.discipline}</th>
                            <th>{i.semester}</th>
                            <th>{i.grade}</th>
                            <th>{i.age}</th>
                            <th>{i.starttime}</th>
                            <th>{i.teacher}</th>
                            <th>
                                <button onClick={() => { }}>查看</button>
                            </th>
                        </tr>
                    );
                })}
            </table>
            <Pagination defaultCurrent={1} total={50} pagesize={2} />
        </>
    )
}
